<!-- 价格时效 -->
<template>
  <view class="priceMain">
    <nut-tabs v-model="state.tab1value" background="white">
      <nut-tab-pane title="运费估算" style="padding: 8px 12px">
        <FreightEstimate :mainState="mainState" :mainShow="mainShow" :mainShow2="mainShow2" @errMsg="errMsg" ref="yfgs"></FreightEstimate>
      </nut-tab-pane>
      <nut-tab-pane title="时效价格" style="padding: 8px 12px">
        <PrescriptionPrice :mainState="mainState" :mainShow="mainShow" :mainShow2="mainShow2" @errMsg="errMsg"></PrescriptionPrice>
      </nut-tab-pane>
    </nut-tabs>
    <nut-popup position="bottom" v-model:visible="mainShow.show">
      <nut-picker
        ok-text="确认"
        cancel-text="取消"
        @cancel="mainShow.show = false"
        v-model="mainState['timeSendAddress']"
        :columns="addressList"
        title="城市选择"
        @confirm="confirm"
      >
      </nut-picker>
    </nut-popup>

    <nut-popup position="bottom" v-model:visible="mainShow2.show">
      <nut-picker
        ok-text="确认"
        cancel-text="取消"
        @cancel="mainShow2.show = false"
        v-model="mainState['timeGetAddress']"
        :columns="addressList"
        title="城市选择"
        @confirm="confirm2"
      >
      </nut-picker>
    </nut-popup>

    <nut-notify v-model:visible="dialogErr.dialogShow" :msg="dialogErr.dialogMsg" />
  </view>
</template>
<script lang="ts" setup>
import Taro, { useReady } from '@tarojs/taro'
import { $post, $get } from '@/@api/index'
import FreightEstimate from './components/freightEstimate.vue'
import PrescriptionPrice from './components/prescriptionPrice.vue'
import { onMounted, ref, reactive, watch } from 'vue'
import { Search2 } from '@nutui/icons-vue-taro'

useReady(() => {
  Taro.setNavigationBarTitle({
    title: '价格时效'
  })
  Taro.setNavigationBarColor({
    frontColor: '#000000',
    backgroundColor: '#ffffff'
  })
})

const searchValue = ref('')
const searchValue2 = ref('')
const state = reactive({
  tab1value: '0'
})
const dialogErr = ref<{
  dialogShow: boolean
  dialogMsg: string
}>({
  dialogShow: false,
  dialogMsg: '请选择发货地'
})
const mainState = ref<{
  sendAddress: Array<string>
  getAddress: Array<string>
  timeSendAddress: Array<string>
  timeGetAddress: Array<string>
}>({
  sendAddress: [],
  getAddress: [],
  timeSendAddress: [],
  timeGetAddress: []
})
const mainShow = ref<{
  show: boolean
}>({
  show: false
})
const mainShow2 = ref<{
  show: boolean
}>({
  show: false
})
export interface AddressList {
  code: string
  children?: AddressList[]
  id: number
  text: string
  value: string
}
const addressList = ref<AddressList[]>([])
const valueChange = (v) => {
  let has = addressList.value.find((t) => {
    return t.text.includes(v)
  })
  if (has) {
    mainState.value[mainShow.value.type] = [has.text, has.children![0].text, has.children![0].children![0].text]
  }
}
//异常提示
function errMsg(msg: string) {
  dialogErr.value.dialogMsg = msg
  dialogErr.value.dialogShow = true
}

const confirm = (data) => {
  mainState.value['sendAddress'] = data.selectedValue
  mainShow.value.show = false
}
const confirm2 = (data) => {
  mainState.value['getAddress'] = data.selectedValue
  mainShow2.value.show = false
}
const addKey = (arr) => {
  arr.forEach((t) => {
    t.value = t.text
    if (t.children) {
      addKey(t.children)
    }
  })

  return arr
}
// 请求所有地址数据
async function getAddress() {
  Taro.showLoading({
    title: '加载中'
  })
  //const { data: res } = await $get<{ data: { info: AddressList[] } }>("/selfmachine-system/addressBook/area/erp/true/true");
  const res = await $post<{ info: AddressList[] }>('http://it.shenghui56.com/serversh/general/addressByCode', {
    showallbranchs: 'true',
    showonlyTF: 'true'
  })
  Taro.hideLoading()
  addressList.value = toDistrictTree(res.data.info)
  mainState.value.sendAddress = ['福建省', '三明市', '梅列区']
  mainState.value.getAddress = ['福建省', '三明市', '梅列区']
  mainState.value.timeSendAddress = ['福建省', '三明市', '梅列区']
  mainState.value.timeGetAddress = ['福建省', '三明市', '梅列区']
}

function toDistrictTree(addressList: any) {
  return addressList.map((it) => {
    return {
      text: it.name,
      value: it.name,
      children: it.children ? toDistrictTree(it.children) : null
    }
  })
}
getAddress()

const events = {
  change(val: string[]) {
    // console.log(val);
  }
}
</script>
<style lang="less" scoped>
// page {
//   background-color: #f5f5f5;
//   --nut-tabs-horizontal-tab-line-color: #0966ff;
//   .nut-tab-pane {
//     background-color: transparent;
//   }
// }
.priceMain {
  height: 100%;
  width: 100%;

  .nut-tabs__content {
    height: 100%;
  }

  .nut-tabs__titles-item.active .nut-tabs__titles-item__line {
    content: ' ';
    width: var(--nut-tabs-horizontal-titles-item-active-line-width, 80rpx);
    height: 6rpx;
    background: var(--nut-tabs-horizontal-tab-line-color, linear-gradient(90deg, var(--nut-primary-color, #0b60ea) 0%, rgba(9, 102, 255, 1) 100%));
  }
}
</style>
